<template>
  <div class="search">
      <add v-if="currView=='add'" @close="currView='index'" @submited="submited" />
      <edit v-if="currView=='edit'" @close="currView='index'" @submited="submited" :data="formData" />
      <Card v-show="currView=='index'">
          <Row v-show="openSearch" @keydown.enter.native="handleSearch">
              <Form ref="searchForm" :model="searchForm" inline :label-width="0">
                  <Form-item ref="searchForm" :model="searchForm" inline :label-width="0" style="display:flex;">
                      <Form-item label="" prop="userName">
                          <Input type="text" v-model="searchForm.userName" placeholder="请输入参保人员" clearable style="width: 200px" />
                      </Form-item>
                      <Form-item label="" prop="status">
                          <Select v-model="searchForm.status" placeholder="审核状态" clearable style="width: 200px">
                              <Option value="0">未审核</Option>
                              <Option value="1">领导审核中</Option>
                              <Option value="2">审核驳回</Option>
                              <Option value="3">审核完成</Option>
                          </Select>
                      </Form-item>
                      <Form-item style="margin-left:10px;" class="br">
                          <Button @click="handleSearch" type="primary" icon="ios-search" size="small" ghost>搜索</Button>
                          <Button @click="handleReset" type="warning" size="small" icon="md-refresh" ghost>重置</Button>
                          <!-- <Button @click="add" type="info" size="small" icon="md-add" ghost>添加</Button>
                          <Button @click="delAll" type="error" icon="md-trash" size="small" ghost>删除</Button> -->
                          <Button @click="excelData" type="success" icon="md-paper-plane" size="small" ghost>导出</Button>
                      </Form-item>
                      <Form-item style="position:fixed;right:50px;top:130px">
                          <Button type="info" @click="showFilterPanelFlag = !showFilterPanelFlag" class="showFilterPanelFlag" icon="md-settings" size="small" ghost>
                              列筛选</Button>
                          <Button type="warning" @click="modal1 = true" class="showFilterPanelFlag" icon="ios-help-circle-outline" size="small" ghost>
                              使用教程</Button>
                          <Modal v-model="modal1" title="使用教程">
                              <p>1.XXXXXXXXXXXXXXXXXXXXXXXX</p>
                              <p>2.XXXXXXXXXXXXXXXXXXXXXXXX</p>
                              <p>3.XXXXXXXXXXXXXXXXXXXXXXXX</p>
                          </Modal>
                      </Form-item>
                  </Form-item>
              </Form>
          </Row>
          <Row class="operation" style="position:relative;">
              <transition>
                  <div v-show="showFilterPanelFlag" class="filter-panel">
                      <CheckboxGroup v-model="selected">
                          <div v-for="item in mycolumns" :key="item.key">
                              <Checkbox :label="item.title" style="margin: 2px 5px"></Checkbox>
                          </div>
                      </CheckboxGroup>
                  </div>
              </transition>
          </Row>
          <Row v-show="openTip"> </Row>
          <Row>
              <Table :loading="loading" :height="tableHeight" border stripe size="small" :columns="columns" :data="data" ref="table" sortable="custom" @on-sort-change="changeSort" @on-selection-change="changeSelect" @on-row-click="rowClick" :row-class-name="rowClassNmae"></Table>
          </Row>
          <Row type="flex" justify="end" class="page">
              <Page :current="searchForm.pageNumber" :total="total" :page-size="searchForm.pageSize" @on-change="changePage" @on-page-size-change="changePageSize" :page-size-opts="[15,20,50]" size="small" show-total show-elevator show-sizer></Page>
          </Row>
      </Card>
      <Modal v-model="isShowTuiFlag" title="审核退回确认" @on-ok="notPassFx">
          <Form label-colon>
              <FormItem label="请输入退回的原因">
                  <input v-model="tuiMessage" />
              </FormItem>
          </Form>
      </Modal>
  </div>
  </template>
  
  <script>
  import {
      getExamineList,
      deleteExamine,
      pass,
      notPass
  } from "./api.js";
  import add from "./add.vue";
  import edit from "./edit.vue";
  export default {
      name: "single-window",
      components: {
          add,
          edit
      },
      data() {
          return {
              eid: "",
              tuiMessage: '',
              isShowTuiFlag: false,
              tableHeight: 0,
              selected: [
                  "选择",
                  "序号",
                  "参保人员",
                  "保险名",
                  "抵扣金额",
                  "审核状态",
                  "审核意见",
                  "创建时间",
                  "创建者",
                  "修改时间",
                  "修改者",
                  "操作",
              ],
              modal1: false,
              openSearch: true, // 显示搜索
              openTip: true, // 显示提示
              formData: {},
              currView: "index",
              loading: true, // 表单加载状态
              searchForm: { // 搜索框初始化对象
                  pageNumber: 1, // 当前页数
                  pageSize: 15, // 页面大小
                  sort: "createTime", // 默认排序字段
                  order: "desc", // 默认排序方式
              },
              selectList: [], // 多选数据
              selectCount: 0, // 多选计数
              selectRow: 0,
              columns: [
                  // 表头
                  {
                      type: "selection",
                      width: 60,
                      title: "选择",
                      align: "center",
                      fixed: "left",
                  },
                  {
                      title: "序号",
                      width: 85,
                      align: "center",
                      fixed: "left",
                      sortType: true,
                      render: (h, params) => {
                          return h(
                              "span",
                              params.index +
                              (this.searchForm.pageNumber - 1) * this.searchForm.pageSize +
                              1
                          );
                      },
                  },
                  {
                      title: "参保人员",
                      key: "userName",
                      minWidth: 120,
                      tooltip: true,
                      sortable: false,
                  },
                  {
                      title: "保险名",
                      key: "insuranceName",
                      minWidth: 120,
                      tooltip: true,
                      sortable: false,
                  },
                  {
                      title: "抵扣金额",
                      key: "money",
                      minWidth: 120,
                      tooltip: true,
                      sortable: false,
                  },
                  {
                      title: "审核状态",
                      key: "status",
                      minWidth: 120,
                      tooltip: true,
                      sortable: false,
                      render: (h, params) => {
                          if (params.row.status == 1) {
                              return h('div', [
                                  h('span', {
                                      style: {
                                          color: '#64c92c'
                                      }
                                  }, "领导审核中"),
                              ]);
                          } else if (params.row.status == 0) {
                              return h('div', [
                                  h('span', {
                                      style: {
                                          color: '#0000ff'
                                      }
                                  }, "待审核"),
                              ]);
                          } else if(params.row.status == 3){
                            return h('div', [
                                h('span', {
                                    style: {
                                        color: '#0000ff'
                                    }
                                }, "审核通过"),
                            ]);
                        }else {
                              return h('div', [
                                  h('span', {
                                      style: {
                                          color: '#ff0000'
                                      }
                                  }, "被驳回"),
                              ]);
                          }
                      }
                  },
                  {
                      title: "审核意见",
                      key: "message",
                      minWidth: 120,
                      tooltip: true,
                      sortable: false,
                  },
                  {
                      title: "创建时间",
                      key: "createTime",
                      sortable: true,
                      sortType: "desc",
                      minWidth: 180,
                      align: "center",
                      tooltip: true,
                  },
                  {
                      title: "创建者",
                      key: "createBy",
                      sortable: true,
                      sortType: "desc",
                      minWidth: 100,
                      align: "center",
                      tooltip: true,
                  },
                  {
                      title: "修改时间",
                      key: "updateTime",
                      minWidth: 180,
                      align: "center",
                      tooltip: true,
                  },
                  {
                      title: "修改者",
                      key: "updateBy",
                      minWidth: 100,
                      align: "center",
                      tooltip: true,
                  },
                  {
                      title: "操作",
                      key: "action",
                      align: "center",
                      width: 200,
                      fixed: "right",
                      render: (h, params) => {
                          return h("div", [
                              h(
                                  "Button", {
                                      props: {
                                          type: "primary",
                                          size: "small",
                                          icon: "ios-create-outline",
                                          ghost: true,
                                          disabled: params.row.status != 1
                                      },
                                      style: {
                                          marginRight: "5px"
                                      },
                                      on: {
                                          click: () => {
                                              this.passFx(params.row);
                                          }
                                      }
                                  },
                                  "通过"
                              ),
                              h(
                                  "Button", {
                                      props: {
                                          type: "error",
                                          size: "small",
                                          icon: "md-trash",
                                          ghost: true,
                                          disabled: params.row.status != 1
                                      },
                                      on: {
                                          click: () => {
                                              this.eid = params.row.id;
                                              this.isShowTuiFlag = true;
                                          }
                                      }
                                  },
                                  "驳回"
                              )
                          ]);
                      }
                  }
              ],
              data: [], // 表单数据
              pageNumber: 1, // 当前页数
              pageSize: 10, // 页面大小
              total: 0, // 表单数据总数
              showFilterPanelFlag: false
          };
      },
      methods: {
          init() {
              this.getDataList();
          },
          submited() {
              this.currView = "index";
              this.getDataList();
          },
          changePage(v) {
              this.searchForm.pageNumber = v;
              this.getDataList();
              this.clearSelectAll();
          },
          changePageSize(v) {
              this.searchForm.pageSize = v;
              this.getDataList();
          },
          rowClick(row, index) {
              this.selectRow = row;
          },
          rowClassNmae(row, index) {
              if (row.id == this.selectRow.id) {
                  return "rowClassNmaeColor";
              }
              return "";
          },
          excelData() {
              this.$refs.table.exportCsv({
                  filename: "导出结果",
              });
          },
          handleSearch() {
              this.searchForm.pageNumber = 1;
              this.searchForm.pageSize = 15;
              this.getDataList();
          },
          handleReset() {
              this.$refs.searchForm.resetFields();
              this.searchForm.pageNumber = 1;
              this.searchForm.pageSize = 15;
              // 重新加载数据
              this.getDataList();
          },
          changeSort(e) {
              this.searchForm.sort = e.key;
              this.searchForm.order = e.order;
              if (e.order === "normal") {
                  this.searchForm.order = "";
              }
              this.getDataList();
          },
          clearSelectAll() {
              this.$refs.table.selectAll(false);
          },
          changeSelect(e) {
              this.selectList = e;
              this.selectCount = e.length;
          },
          getDataList() {
              this.loading = true;
              getExamineList(this.searchForm).then(res => {
                  this.loading = false;
                  if (res.success) {
                      this.data = res.result.records;
                      this.total = res.result.total;
                  }
              });
          },
          add() {
              this.currView = "add";
          },
          edit(v) {
              // 转换null为""
              for (let attr in v) {
                  if (v[attr] == null) {
                      v[attr] = "";
                  }
              }
              let str = JSON.stringify(v);
              let data = JSON.parse(str);
              this.formData = data;
              this.currView = "edit";
          },
          passFx(e) {
              var that = this;
              this.$Modal.confirm({
                  title: "确认通过",
                  content: "您确认要通过 ?",
                  loading: true,
                  onOk: () => {
                      pass({
                          id: e.id,
                          status:3
                      }).then(res => {
                          this.$Modal.remove();
                          if (res.success) {
                              this.$Message.success("通过成功");
                              that.getDataList();
                          }
                      });
                  }
              });
          },
          notPassFx() {
              var that = this;
              notPass({
                  id: that.eid,
                  msg: that.tuiMessage
              }).then(res => {
                  if (res.success) {
                      this.$Message.success("驳回成功");
                      that.getDataList();
                  }
              });
          },
          remove(v) {
              this.$Modal.confirm({
                  title: "确认删除",
                  content: "您确认要删除 " + v.name + " ?",
                  loading: true,
                  onOk: () => {
                      deleteExamine({
                          ids: v.id
                      }).then(res => {
                          this.$Modal.remove();
                          if (res.success) {
                              this.$Message.success("操作成功");
                              this.getDataList();
                          }
                      });
                  }
              });
          },
          delAll() {
              if (this.selectCount <= 0) {
                  this.$Message.warning("您还未选择要删除的数据");
                  return;
              }
              this.$Modal.confirm({
                  title: "确认删除",
                  content: "您确认要删除所选的 " + this.selectCount + " 条数据?",
                  loading: true,
                  onOk: () => {
                      let ids = "";
                      this.selectList.forEach(function (e) {
                          ids += e.id + ",";
                      });
                      ids = ids.substring(0, ids.length - 1);
                      // 批量删除
                      deleteExamine({
                          ids: ids
                      }).then(res => {
                          this.$Modal.remove();
                          if (res.success) {
                              this.$Message.success("操作成功");
                              this.clearSelectAll();
                              this.getDataList();
                          }
                      });
                  }
              });
          }
      },
      mounted() {
          this.init();
          this.tableHeight = Number(window.innerHeight - 273);
          this.mycolumns = this.columns;
          let showcolumns = [];
          for (var i = 0; i < this.selected.length; i++) {
              var item = this.selected[i];
              for (var j = 0; j < this.columns.length; j++) {
                  if (this.columns[j].title == item) {
                      showcolumns.push(this.columns[j]);
                  }
              }
          }
          this.columns = showcolumns;
      },
      watch: {
          selected: function (newcolumns) {
              let showcolumns = [];
              for (var i = 0; i < this.mycolumns.length; i++) {
                  var item = this.mycolumns[i];
                  if (item.title == undefined) showcolumns.push(item);
                  else if (newcolumns.contains(item.title)) showcolumns.push(item);
              }
              this.columns = showcolumns;
          },
      },
  };
  </script>
  
  <style lang="less">
  // @import "../../../styles/table-common.less";
  .search {
      .operation {
          margin-bottom: 2vh;
      }
  
      .select-count {
          font-weight: 600;
          color: #40a9ff;
      }
  
      .select-clear {
          margin-left: 10px;
      }
  
      .page {
          margin-top: 2vh;
      }
  
      .drop-down {
          margin-left: 5px;
      }
  }
  
  .filter-panel {
      width: 166px;
      min-height: 120px;
      height: 200px;
      position: absolute;
      background-color: white;
      z-index: 9999;
      margin-left: 1px;
      overflow-y: scroll;
      border: 1px solid blue;
      top: 35px;
      right: 10px;
  }
  
  .openSearch {
      position: absolute;
      right: 240px;
  }
  
  .openTip {
      position: absolute;
      right: 130px;
  }
  
  .showFilterPanelFlag {
      position: static !important;
      right: 10px;
      margin-right: 10px;
  }
  
  .ivu-table td {
      height: 38px !important;
  }
  
  .ivu-table-cell-with-expand {
      height: 38px !important;
      line-height: 38px !important;
  }
  
  .ivu-table .rowClassNmaeColor td {
      background-color: #b0b3b6 !important;
      color: #ffffff !important;
      font-size: 12px;
  }
  </style>
  